<template>
	<view>
	    <view class="green"></view>
	    <view class="card">
			<view class='card_title'>温馨提示(Tips):</view>
			<view class="notes">
				<p><span>*</span>请扫码申请绑定设备，申请详情可在绑定申请中查看，审批通过后在我的设备中查看详细信息
				Scan the code to apply for a binding device. You can view the application details in the binding
				application. After the application is approved, you can view the details in My device</p>
			</view>
			<button class="scanBt" @click="scanQRCode"  >
				<image class="bt-img" src="https://cdnjson.com/images/2023/09/26/_20230926090534.png"></image>
				<view style="display: block;">
					<view style="color: #ffffff;">扫描二维码</view>
					<view style="color: #ffffff; font-size: 14px">Scan the QR code</view>
				</view>
				
			</button>
		</view>
		<userTab ></userTab>
		<privacy-popup ref="privacyComponent" position="center" ></privacy-popup>
	</view>

</template>

<script>
// import userTab from '@/pages/UserTabBar/userTab.vue'
import { data } from '../../uni_modules/uview-ui/libs/mixin/mixin';
import privacyComponent from '@/components/privacy-popup/privacy-popup.vue';
	let me;
export default {
	components: {
	    privacyComponent,
	  },
	data() {
		return {
			
			deviceNumber: '',
			devicetype: '',  // 设备类型
			devicemodel: '', //设备型号
			deliverytime: '',  //出厂时间
			customername: '',   // 客户名称
			binder: '',         // 绑定 人
			customerphone: '',   // 客户电话 
			position: '',		// 职位
			openid: '',
			equipmentManual:'',   // 设备说明书		
			equipmentManualName:''  // 说明书名字 
		};
	},
	// components: {
	//     'view-tabbar': userTab
	// },
  methods: {
    scanQRCode() {  //扫描
		this.openid = uni.getStorageSync('clientOpenid')
      uni.scanCode({
		// onlyFromCamera: true,  // 只允许相机扫描
        success: (res) => {
          console.log(res.result); // 打印扫码结果
          // 在这里可以对扫码结果进行处理
		  //  判断 服务器是否存在 数据 
		  let deviceId = res.result
		  if(deviceId.substring(0 ,4) == 'SMAC'){
			  console.log("-----saomiao11111----------",deviceId,"--- openid---",this.openid)
				uni.request({
					url: 'https://www.smacaftersales.com:443/bindDevice/bindDevice/whetherBindDevice',
					method: 'GET',
					header: {
						"Content-Type": "application/json" //请求头信息
					},
					data:{
						serialnumber: deviceId,
						openid: this.openid
					},
					success: (res) => {
						console.log("----- 设备 数据 --------",res)
						if (res.data.data.length == 0 ) {
							uni.showModal({
							title: "绑定设备提示(Tips)",
							content: "当前设备暂未绑定是否绑定(The device is not bound. Whether to bind the device)",
							cancelText: 'No',
							confirmText: 'Yes',
							showCancel:true,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定******扫码结果', deviceId);
										let data = { title: deviceId,
										}
										uni.navigateTo({
											url: '/pages/clientVue/bindDeviceSubmit?data=' + encodeURIComponent(JSON.stringify(data))
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						} else{
							me = this;
							me.devicetype = res.data.data[0].devicetype
							me.devicemodel= res.data.data[0].devicemodel
							me.deliverytime= res.data.data[0].deliverytime
							me.customername= res.data.data[0].customername
							me.binder=res.data.data[0].binder
							me.customerphone= res.data.data[0].customerphone
							me.position= res.data.data[0].position
							me.equipmentManual = res.data.data[0].equipmentManual
							me.equipmentManualName = res.data.data[0].equipmentManualName
							
							uni.showModal({
							title: "提示(Tips)",
							content: "当前设备已绑定，是否跳转到详情界面(If the current device is bound, check whether to go to the details page)",
							cancelText: 'No',
							confirmText: 'Yes',
							showCancel:true,
								success: function (res) {
									if (res.confirm) {
										console.log('用户点击确定');
										// 数据存在 跳转到 信息界面  
										let data = { title: deviceId,
										devicetype: me.devicetype,
										devicemodel: me.devicemodel, //设备型号
										deliverytime: me.deliverytime,  //出厂时间
										customername: me.customername,   // 客户名称
										binder: me.binder,         // 绑定 人
										customerphone: me.customerphone,   // 客户电话 
										position: me.position,			// 职位
										equipmentManual: me.equipmentManual,
										equipmentManualName: me.equipmentManualName
										}
										 uni.navigateTo({
											url: "/pages/clientVue/deviceInfo?data=" + encodeURIComponent(JSON.stringify(data))
										 })
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}	
					}
				})
		  }else{ 
			  uni.showToast({
			  	title: '您扫描的二维码不正确，请重新扫码',
			  	duration: 2000,
			  	icon: 'error'
			  })
		  }	
        },
        fail: (res) => {
          console.log(res);
          // 处理扫码失败的情况
		  uni.showToast({
		  	title: '二维码错误，请重新扫码',
			duration: 2000,
			icon: 'none'
		  })
        }
      });
    }
  },
	onUnload() {
		console.log("---- 监听页面卸载---")
		uni.switchTab({
			url: '/pages/adminVue/my'
		})
	  }, 
	onShow() {},
	onLoad() {
		// 分享 转发给朋友
		 uni.showShareMenu({
		        withShareTicket:true,
		        //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
		        menus:["shareAppMessage","shareTimeline"]
		    })
	}

}
</script>

<!-- <style>
page {
	height: 100%;
	background-color: #ffffff;
}
</style> -->
<style lang="scss">
	.bt-img{
		width: 50px;
		height: 50px;
	}
	.scanBt{
		width: 200px;
		height: 30%;
		display: flex; //设置为flex布局  
		justify-content: center; //设置水平居中  
		align-items: center;
		margin-left: 40px;
		margin-top: 15px;
		background-color: #55aaff;
		border-radius: 15px;	
		// border: 3rpx solid #6699FF;
		// background: linear-gradient(to right, blue, pink);
	}
	// .scanBt:after{  //去除细边框
	// 	border: none;
	// }
	.notes{
		width: 80%;
		margin: 20px auto 10px;
		font-size: 15px;
		span{
			color: red;
			margin-right: 4px;
		}
		p{
			color: #999;
		}	
	}
	page {
	    /* 苹果手机会有拉伸的效果，
	       所以下拉效果要是绿色，
	       上拉要是灰色 */
	    /* background: #EDEDED; */
	    background: linear-gradient(#51f096 0%, #51f096 200rpx,#EDEDED 201rpx, #EDEDED 100%);
	}
	.green {
	    width: 100%;
	    height: 300rpx;
	    background: #3CB271;
	    position: relative;
	    z-index: 1;
	}
	.green::after {
	    content: "";
	    position: absolute;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    width: 100%;
	    height: 72rpx;
	    background: url("https://img-blog.csdnimg.cn/25edb7848688457f9918829264f9a5e7.png#pic_center") no-repeat left bottom;
	    background-size: 100% 72rpx;
	    z-index: 2;
	}
	.card {
	    width: 560rpx;
	    height: 746rpx;
	    background: #FFFFFF;
	    box-shadow: 0px 8rpx 16rpx 0px rgba(0,0,0,0.08);
	    border-radius: 13rpx;
	    margin: -220rpx auto 0;
	    position: relative;
	    z-index: 3;
	}
	.card_title{
	  font-size: 38rpx;
	  font-weight: 600;
	  width: 80%;
	  margin-left: 10%;
	  height: 100rpx;
	  line-height: 100rpx;
	  border-bottom: 1px solid #79DBAA;
	  text-align: center;
	  letter-spacing:5rpx;
	}

</style>